<script setup>
// 组件引入
import tabs from './cpns/tabs.vue'
// 功能函数引入
import { ref, watch } from "vue";
import { storeToRefs } from 'pinia'
import eventBus from '@/utils/eventBus.js'
import { useLoginStore } from '@/store/loginStore'
import router from '@/router/router'
import { ElMessage } from 'element-plus'

const loginStore = useLoginStore();
const { isLoading, roleType, isSuccessLogin, loginCode } = storeToRefs(loginStore)

const tabValue = ref('');
const submitForm = () => {
    // 开启loading动画
    isLoading.value = true;
    // 发送获取当前tab的事件
    eventBus.emit('getCurrentTab');
    if (tabValue.value === 'acount') {   // 账号登录
        eventBus.emit('accountLogin');
    } else {    // 手机登录
        eventBus.emit('phoneLogin');
    }
}
const resTabValue = (value) => {
    tabValue.value = value;
}

// 是否记住密码
const rem_pwd = localStorage.getItem('isRememberPwd') ?? "";
const isRememberPwd = ref(rem_pwd == "true" ? true : false);
watch(isRememberPwd, (newValue) => {
    // 将记住密码的状态保存到localStorage中
    localStorage.setItem('isRememberPwd', newValue);
})

// 登录成功
watch(loginCode, (newValue) => {
    if (!newValue && isSuccessLogin.value) { // 表示登录成功
        // 跳转到首页页面
        router.push('/main');
        // 显示提示信息
        ElMessage({
            message: '登录成功！欢迎使用宿舍管理系统。',
            type: 'success',
        })
    } else if (newValue === 1 && !isSuccessLogin.value) {   // 登录失败，用户名或密码错误
        console.log('登录失败，用户名或密码错误！');
    }   
    // 关闭loading
    isLoading.value = false;
})

</script>

<template>
  <div class="login_page">
    <div class="login_panel">
        <h1>学生宿舍管理系统</h1>
        <!-- tabs组件 -->
        <div class="tabs">
            <tabs @getTabValue="resTabValue" />
        </div>
        <!-- 登录的角色类型 -->
        <div class="role_type">
            <el-radio-group v-model="roleType" class="radios">
                <el-radio :label="0">学生</el-radio>
                <el-radio :label="1">宿管</el-radio>
                <el-radio :label="2">系统管理员</el-radio>
            </el-radio-group>
        </div>
        <div class="controls">
            <el-checkbox v-model="isRememberPwd" label="记住密码"/>
            <el-link type="primary">忘记密码</el-link>
        </div>
        <div class="login_btn">
            <el-button 
            type="primary" 
            class="btn" 
            @click="submitForm"
            :loading="isLoading">立即登录</el-button>
            <transition name="errInfo">
                <small 
                v-if="loginCode === 1 && !isSuccessLogin.value"
                >登录失败！用户名或密码错误~</small>
            </transition>
        </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.login_page {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
    background: url(../../assest/images/bg.webp) center/100%  no-repeat;

    .login_panel {
        padding: 20px;
        margin-right: 150px;
        text-align: center;
        width: 350px;
        box-sizing: border-box;
        border-radius: 15px;
        background-color: #fff;
        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 0;
        }
        .login_btn {
            .btn {
                width: 100%;
            }
        }
        .role_type {
            .radios {
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
small {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    color: #F56C6C;
}
.errInfo-enter-from,
.errInfo-leave-to {
    height: 0;
}
.errInfo-leave-from,
.errInfo-enter-to {
    height: 20px;
}
.errInfo-enter-active,
.errInfo-leave-active {
    transition: all .1s linear;
}

</style>